<template>
  <div class="__form">
    <div class="flex-start m-b-30">
      <el-button
        icon="el-icon-back"
        type="primary"
        plain
        round
        size="small"
        @click="back"
        >返回</el-button
      >
    </div>
    <div
      v-if="loadingImg || loadingData"
      class="flex-center"
      style="height: 400px"
    >
      <div></div>
      <div><i class="el-icon-loading"></i>加载中...</div>
      <div></div>
    </div>
    <el-form
      v-else
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="130px"
      :disabled="type === 'view'"
    >
      <el-form-item label="加注站名称" prop="siteName">
        <el-input v-model="form.siteName"></el-input>
      </el-form-item>
      <el-form-item label="加注站类型" prop="siteType">
        <el-select
          v-model="form.siteType"
          placeholder="请选择加注站类型"
          style="width: 100%"
        >
          <el-option
            :label="siteType.dictValue"
            :value="siteType.dictKey + ''"
            v-for="siteType in siteTypeList"
            >{{ siteType.dictValue }}</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item label="加注站定位" prop="siteLng">
        <div class="flex-start w-100">
          <el-input disabled v-model="form.siteLng" class="m-r-10 f-g-1" />
          <el-input disabled v-model="form.siteLat" class="m-r-10 f-g-1" />
          <el-button
            type="primary"
            @click="showSelectLocationFlag = true"
            size="small"
            >选择位置</el-button
          >
        </div>
      </el-form-item>
      <el-form-item label="加注站地址" prop="address">
        <app-address
          ref="appAddressRef"
          size="large"
          @output="regionChange"
          :init-value="initAddress"
        />
        <el-input
          v-model="form.siteAddress"
          style="margin-top: 10px"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系人姓名" prop="contactName">
        <el-input v-model="form.contactName"></el-input>
      </el-form-item>
      <el-form-item label="加注站描述" prop="siteDesc">
        <el-input type="textarea" :rows="4" v-model="form.siteDesc"></el-input>
      </el-form-item>
      <el-form-item label="加注站照片" prop="attachmentIds">
        <app-file-upload
          ref="appImgUploadRef"
          max-size="5Mb"
          :init-imgs="initAttachmentImgs"
          @change="imgChange"
        />
      </el-form-item>
      <el-form-item label="营业状态" prop="siteStatus">
        <el-radio v-model="form.siteStatus" :label="1">正常</el-radio>
        <el-radio v-model="form.siteStatus" :label="0">关闭</el-radio>
      </el-form-item>
      <el-form-item label="备注" prop="siteRenark">
        <el-input v-model="form.remark"></el-input>
      </el-form-item>
      <el-form-item class="m-t-10" v-if="type !== 'view'">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save" :loading="saveLoading"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 地图手动定位 -->
    <el-dialog
      title="选择位置"
      append-to-body
      :visible.sync="showSelectLocationFlag"
      width="1000px"
    >
      <map-select-location-content
        v-if="showSelectLocationFlag"
        :init-location="[form.siteLng, form.siteLat]"
        @hide="showSelectLocationFlag = false"
        @change="locationChange"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  listNotEmpty,
  msgError,
  isNotNull,
  isNull,
  isStringEmpty,
  msgSuccess,
  isListEmpty,
} from "@/util/common-util";
import { detail, submit } from "@/api/stake/filling-stations";
import mapSelectLocationContent from "@/components/business/map-select-location-content.vue";
import appAddress from "@/components/business/app-address.vue";
import appFileUpload from "@/components/business/app-file-upload.vue";
export default {
  name: "filling-station-add-edit-content",
  data() {
    return {
      loadingData: false,
      loadingImg: false,
      saveLoading: false,
      showSelectLocationFlag: false,
      form: {
        siteName: "",
        siteType: "",
        siteLng: "",
        siteLat: "",
        provinceCode: "",
        cityCode: "",
        districtCode: "",
        siteAddress: "",
        partnerId: "",
        contactName: "",
        siteDesc: "",
        siteStatus: 1,
        siteRenark: "",
        attachmentIds: [],
      },
      initAttachmentImgs: [],
      initAddress: null,
      rules: {
        siteName: [
          { required: true, message: "请输入加注站名称", trigger: "blur" },
        ],
        siteType: [
          { required: true, message: "请选择加注站类型", trigger: "change" },
        ],
        contactName: [
          { required: true, message: "请填写联系人姓名", trigger: "blur" },
        ],
        siteAddress: [
          { required: true, message: "请填写加注站地址", trigger: "change" },
        ],
        districtCode: [
          { required: true, message: "请选择加注站地址", trigger: "change" },
        ],
        siteLng: [
          { required: true, message: "请选择加注站位置", trigger: "change" },
        ],
      },
    };
  },
  components: {
    mapSelectLocationContent,
    appAddress,
    appFileUpload,
  },
  props: {
    id: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    siteTypeList: {
      type: Array,
      default: () => [],
    },
  },
  created() {
    this.initForm();
  },
  methods: {
    initForm() {
      this.loadingData = true;
      if (this.type !== "add") {
        detail(this.id).then((res) => {
          this.form = res.data.data;
          this.initAddress = {
            province: res.data.data.provinceCode,
            city: res.data.data.cityCode,
            area: res.data.data.districtCode,
          };
          this.loadingData = false;
          console.log("this.initAddress");
          console.log(this.initAddress);
        });
      } else {
        this.loadingData = false;
      }
    },
    back(refresh) {
      this.$emit("back", refresh);
    },
    cancel() {
      this.back();
    },
    locationChange(curLocation, addressOutput, regionOutput) {
      if (listNotEmpty(curLocation)) {
        this.form.siteLng = curLocation[0];
        this.form.siteLat = curLocation[1];
      }
      if (!isStringEmpty(addressOutput)) {
        this.form.siteAddress = addressOutput;
      }
      if (
        isNotNull(regionOutput) &&
        isNotNull(regionOutput.area) &&
        isNotNull(regionOutput.area.key)
      ) {
        this.$refs.appAddressRef.init(
          regionOutput.province.key,
          regionOutput.city.key,
          regionOutput.area.key
        );
      }
    },
    regionChange(region) {
      if (isNull(region)) return;
      if (isNull(region.province)) return;
      this.form.provinceCode = region.province.key;
      if (isNull(region.city)) return;
      this.form.cityCode = region.city.key;
      if (isNull(region.area)) return;
      this.form.districtCode = region.area.key;
    },
    imgChange(ids) {
      console.log(ids);
      this.form.attachmentIds = ids;
    },
    save() {
      if (isStringEmpty(this.form.siteName)) return msgError("加注站名称为空");
      if (isStringEmpty(this.form.siteLng)) return msgError("加注站位置为空");
      if (isStringEmpty(this.form.siteLat)) return msgError("加注站位置为空");
      if (isStringEmpty(this.form.provinceCode))
        return msgError("加注站地址为空");
      if (isStringEmpty(this.form.cityCode)) return msgError("加注站地址为空");
      if (isStringEmpty(this.form.districtCode))
        return msgError("加注站地址为空");
      if (isStringEmpty(this.form.siteAddress))
        return msgError("加注站详细地址为空");
      if (isStringEmpty(this.form.contactName)) return msgError("联系人为空");
      // if (isListEmpty(this.form.attachmentIds))
      //   return msgError("加注站照片为空");

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          submit(this.form).then((res) => {
            msgSuccess();
            this.$refs.appImgUploadRef.removeFile();
            this.$emit("back", true);
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.__form {
  width: 48%;
}
</style>
